<!-- 从业者端-完善信息-相关证明 -->
<template>
	<view class="container">
		<!-- 步骤条 -->
		<u-steps :list="stepsList" :current="4" active-color="#03B8CD" mode="number">
		</u-steps>

		<!-- 日历 -->
<!-- 		<u-calendar v-model="show" ref="calendar" @change="change" :active-bg-color="activeBgColor" :btn-type="btnType"
			max-date="2100-01-01">
		</u-calendar> -->
		
		<!-- picker弹窗 -->
		<u-picker v-model="show" :mode="mode" :range="range" @confirm="confirm"></u-picker>
		


		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 提交的this.$refs.form.validate验证，一定是需要有form标签的ref="form"来对应的，否则会报错 -->
			<u-form :model="form" ref="form" :rules="rules">
				<!-- 相关等级证书 -->
				<view class="form-section">
					<view class="section-title">
						<view class="">
							<text class="required">*</text>
							<text>相关等级证书</text>
							<text class="section-subtitle">报考四级及以上等级证书，如果不是相关专业学员需要上传上一级等级证书的照片</text>
						</view>
						<view
							class="custom-link"
							@click="previewImage('www.xzbky.com/static/kangyangtrain/1000/sample/职称或晋级证书/等级证书.png')">
							等级证书示例
						</view>
						<!-- <u-link href="#"  color="#03B8CD">等级证书示例</u-link> -->
					</view>
					<u-upload 
						ref= "upload"
						:action="action" 
						:file-list="form.licenseFiles" 
						@on-list-change="onchange"
						@on-remove="(e) => DeletePic(e, index)"
						:multiple="false" 
						max-count="1"
						upload-text="相关等级证书" 
						:custom-btn="true"
						:auto-upload="false"
						>
						<!-- 自定义上传图片 -->
						<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<u-icon name="camera" size="60" :color="$u.color['lightColor']"></u-icon>
						</view>
					</u-upload>
				</view>


				<!-- 证书号 -->
				<view class="form-section">
					<u-form-item label="证书号" prop="certificate" label-width="240">
						<u-input v-model="form.certificate" placeholder="请输入证书号" clearable/>
					</u-form-item>
				</view>
				
				
				<!-- 证书等级 -->
				<view class="form-section">
					<u-form-item label="*证书等级" prop="name" label-width="240">
						<u-input v-model="form.certificateLevel" placeholder="请输入数字，支持小数点后一位" clearable />
					</u-form-item>
				</view>				


				<!-- 发证日期 -->
				<view class="form-section">
					<u-form-item label="*发证日期" prop="startDate" label-width="240">
						<u-input v-model="form.startDate" placeholder="年-月-日" clearable @click="showChange('start')" :focus="false" disabled/>
					</u-form-item>
				</view>
						


				<!-- 按钮组 -->
				<view class="button-group">
					<u-button type="default" @click="handlePrev" shape="circle" :custom-style="customStyleObject">
						上一步
					</u-button>
					<u-button type="primary" @click="handleNext" shape="circle" :loading="loading" :custom-style="customStyleObjectBut">
						信息无误，下一步
					</u-button>
				</view>
			</u-form>
		</view>
	</view>
</template>

<script>
	import util from '@/utils/util.js'
	export default {
		data() {
			return {
				// 有无学历选择
				value: '有',
				result: '有',
				activeColor: '#2979ff',
				list: [
					{
						name: '有',
						checked: true,
						disabled: false
					},
					{
						name: '无法提供',
						checked: false,
						disabled: false
					}
				],
				// 日历 
				show: false,
				activeBgColor: '#2979ff',
				btnType: "primary",
				inputType: "", //判断是起始日期还是有效日期
				
				// picker弹窗
				pickerShow: false,
				mode: "selector",
				range:  ['硕士生以上', '硕士', '本科', '专科'],

				loading: false,
				//图片上传地址
				action: 'http://127.0.0.1:7001/upload',
				// 图片数组
				licenseFiles: [],
				// 步骤条
				stepsList: [{
						name: "申报信息"
					},
					{
						name: "身份证件"
					},
					{
						name: "学历证明"
					},
					{
						name: "工作证明"
					},
					{
						name: "相关证书"
					},
				],
				
				form: {
					certificate: '',  //证书号
					certificateLevel: '', ///证书等级
					startDate: '', //参加工作时间	
					licenseFiles: [], ///相关等级证书
					licenseFilesId: '', //相关等级证书ID
				},

				// 按钮组中的样式写法
				customStyleObject: {
					marginRight: '20rpx',
					color:"#03B8CD"

				},
				customStyleObjectBut: {
					"backgroundColor": "#03B8CD",
					"color": "#ffffff",
				},
				rules: {
					companyName: [{
						required: true,
						message: '请输入营业执照名称',
						trigger: 'blur'
					}],
					creditCode: [{
							required: true,
							message: '请输入社会信用代码',
							trigger: 'blur'
						},
						{
							validator: (rule, value, callback) => {
								return /^[0-9A-Z]{18}$/.test(value);
							},
							message: '请输入18位统一社会信用代码',
							trigger: ['blur', 'change']
						}
					],
					legalPerson: [{
						required: true,
						message: '请输入法人姓名',
						trigger: 'blur'
					}],
					startDate: [{
						required: true,
						message: '请选择起始日期',
						trigger: 'change'
					}]
				}
			}
		},
		onShow() {
			this.getOtherZs()
		},
		
		methods: {
			getOtherZs() {
				this.$u.api.querykzs({
					"usercode": uni.getStorageSync('usercode'), //#用户编号
				}).then(res => {
					console.log('相关：', res)
					let baseinfo = res.data.base_info
					this.form = {
						certificate: baseinfo.cykzzs_zsh,  //证书号
						certificateLevel: baseinfo.cykzzs_zsdj, ///证书等级
						startDate:  baseinfo.cykzzs_fzrq, //参加工作时间	
						licenseFilesId: baseinfo.cykzzs_djuri[0].imguri, //相关等级证书ID
					}
					this.form.licenseFiles= [] ///相关等级证书
					let headeruri = this.chanageArray(baseinfo.cykzzs_djuri)
					this.form.licenseFiles = [...this.form.licenseFiles, ...headeruri];
					console.log('相关-1：', this.form)
				})
				
			},
			
			// 存储成数组对象
			chanageArray(uri) {
				// 存储成数组对象
				return  uri.map(item => ({
					url: item.url, // 临时路径
				}))
				
			},	
			
			// 营业执照上传
			// 图片上传，不管是否成功都会触发
			// 图片变化开始			
			// 上传Base64数据到服务器
			uploadBase64() {
				// console.log('upload:', this.base64Data)
				if (!this.base64Data) {
					uni.showToast({
						title: '请先选择图片',
						icon: 'none'
					})
					return
				}	
				uni.showLoading({
					title: '上传中...'
				})		
				this.$u.api.uploadres({
					"usercode": uni.getStorageSync('usercode'),
					"rescode": this.base64Data,
					"restype": "0",
					"resdesc": "上传照片"
				}).then(res => {					
					// 存储图片的ID
					this.form.licenseFilesId = res.data.base_info
					console.log('uploadres-licenseFilesId:', this.form.licenseFilesId)		
				})
			},			
			
			// 当工作经历图片变化时
			onchange(list,name) {
				if(this.form.licenseFiles.length == 0) {
					// console.log('图片变化时-name：',name)
					if(list.length != 0){
						const file = list[0]
						console.log("onchange:", file.url)
						// 处理新准备上传的照片文件（添加必要字段）
						const newFiles = list.map(item => ({
							url: item.url, // 临时路径
						}))
						// console.log("onchange-1:", newFiles)
						// this.licenseFiles = file // 更新文件列表	
						this.form.licenseFiles = []
						// this.certificates[name].photoList = file.url
						this.form.licenseFiles = [...this.form.licenseFiles, ...newFiles];
						console.log("onchange-2:", this.form)
						// 将图片转换为Base64
						util.getPhotoBase64(file.url, base64 => {
							// console.log('main-bser64', base64)
							this.base64Data = base64
							// 转换成功后上传
							this.uploadBase64()
						})					
					}
				}
				
			},	
	
	    //图片变化结束

			// Picker弹窗
			showChange(type) {
				this.inputType = type;
				this.mode = 'time'
				this.show = !this.show;	
			},
			
			// picker选择选择确认
			confirm(e) {
				if (this.inputType == 'start') {
					// 相关等级证书
					this.form.startDate =  e.year + '-' + e.month + '-' + e.day
				} else {
					// 赋值地区
					this.form.selectRegion = e.province.label + '-' + e.city.label + '-' + e.area.label;;
				}
			},
			
			
			// 单选项
			radioGroupChange(e) {
				this.result = e
				
			},
			
			
			// 删除图片
			DeletePic(event, index) {
				this.form.licenseFiles.splice(event, 1)
			},


			

			// 上一步
			handlePrev() {
				// uni.navigateBack();
				uni.reLaunch({
					url: '/pages/Practitioner/perfectData/workProve'
				});
			},

			// 下一步
			handleNext() {
				this.$u.api.createkzzs({
					"usercode": uni.getStorageSync('usercode'), //#用户编号
					"cykzzsdjuri":this.form.licenseFilesId,//#等级证书图片uri
					"cykzzszsh": this.form.certificate,//#证书编号
					"cykzzszsdj": this.form.certificateLevel,//#证书等级
					"cykzzsfzrq": this.form.startDate,//#证书发证日期
				}).then(res => {
					console.log('相关证书：', res)
					// uni.navigateTo({
					// 	url: '/pages/Practitioner/perfectData/fillInFinish'
					// });
					uni.reLaunch({
						url: '/pages/Practitioner/perfectData/fillInFinish'
					});
					
				})

				
				// 验证跳转
				// this.$refs.form.validate(valid => {
				// 	if (!valid) return;

				// 	if (this.licenseFiles.length === 0) {
				// 		return this.$u.toast('请上传营业执照');
				// 		// console.log('toast请上传营业执照');
				// 	}

				// 	this.loading = true;

				// 	// 模拟API调用
				// 	setTimeout(() => {
				// 		this.loading = false;
				// 		uni.navigateTo({
				// 			url: '/pages/Practitioner/perfectData/idCard'
				// 		});
				// 	}, 1000);
				// });
			},
			previewImage(imageUrl) {
				console.log('预览成功',imageUrl);
				// 确保URL格式正确
				const fullUrl = imageUrl.startsWith('http') ? imageUrl : `https://${imageUrl}`;		
						console.log('预览成功-1',fullUrl);
				// 微信小程序图片预览
				uni.previewImage({
					urls: [fullUrl], // 需要预览的图片链接列表
					current: 0, // 当前显示图片的索引
					success: () => {
						console.log('预览成功');
					},
					fail: (err) => {
						console.log('预览失败', err);
						uni.showToast({
							title: '预览失败',
							icon: 'none'
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 10rpx;
		// background-color: #f5f5f5;
		min-height: 100vh;


		.slot-btn {
			width: 104px;
			height: 104px;
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgb(244, 245, 246);
			border-radius: 10rpx;
			margin-left: 10px;
		}

		.slot-btn__hover {
			background-color: rgb(235, 236, 238);
		}

		.header {
			margin-bottom: 40rpx;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}
		}

		/deep/ .u-steps {
			background: #fff;
			padding: 30rpx;
			border-radius: 12rpx;
			margin-bottom: 30rpx;
		}
		
		// 有无毕业证书
		.graduation-container {	
			display: flex;
			
			.required {
				margin-left: 20px;
				color: #f56c6c;
				margin-right: 8rpx;
			}
			
			.graduation-title {
				margin-right: 30px;
				font-size: 16px;
			}
			
		}

		.form-container {
			background: #fff;
			padding: 40rpx;
			border-radius: 12rpx;

			.form-section {
				margin-bottom: 40rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: row;
				align-content: flex-start;
				align-items: center;


				.section-title {
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 16rpx;

					.required {
						color: #f56c6c;
						margin-right: 8rpx;
					}
				}

				.section-subtitle {
					font-size: 26rpx;
					color: #999;
					margin-bottom: 20rpx;
					display: block;
				}
			}		
			.button-group {
				display: flex;
				justify-content: space-between;
				margin-top: 60rpx;

				// 此样式主要为了适配wx小程序的按钮
				/deep/ .u-size-default {
					width: 150px;
				}

				.u-btn {
					flex: 1;
				}
			}
		}
		.custom-link {
		  color: #03B8CD;
			font-size: 28rpx;
		  // text-decoration: underline;
		  // padding: 10rpx 0;
		}
	}
</style>